<a href='https://github.com/angular/angular.js/edit/v1.4.x/src/ng/filter/filter.js?message=docs(filter)%3A%20describe%20your%20change...#L3' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>



<a href='https://github.com/angular/angular.js/tree/v1.4.7/src/ng/filter/filter.js#L3' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>


<header class="api-profile-header">
  <h1 class="api-profile-header-heading">filter</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
    <li>
      - filter in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>



<div class="api-profile-description">
  <p>Selects a subset of items from <code>array</code> and returns it as a new array.</p>

</div>




<div>
  

  
  <h2>Usage</h2>
  <h3>In HTML Template Binding</h3>
  
    <pre><code>{{ filter_expression | filter : expression : comparator}}</code></pre>
  

  <h3>In JavaScript</h3>
  <pre><code>$filter(&#39;filter&#39;)(array, expression, comparator)</code></pre>

  
<section class="api-section">
  <h3>Arguments</h3>

<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        array
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-array">Array</a>
      </td>
      <td>
        <p>The source array.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        expression
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a><a href="" class="label type-hint type-hint-object">Object</a><a href="" class="label type-hint type-hint-function">function()</a>
      </td>
      <td>
        <p>The predicate to be used for selecting items from
  <code>array</code>.</p>
<p>  Can be one of:</p>
<ul>
<li><p><code>string</code>: The string is used for matching against the contents of the <code>array</code>. All strings or
objects with string properties in <code>array</code> that match this string will be returned. This also
applies to nested object properties.
The predicate can be negated by prefixing the string with <code>!</code>.</p>
</li>
<li><p><code>Object</code>: A pattern object can be used to filter specific properties on objects contained
by <code>array</code>. For example <code>{name:&quot;M&quot;, phone:&quot;1&quot;}</code> predicate will return an array of items
which have property <code>name</code> containing &quot;M&quot; and property <code>phone</code> containing &quot;1&quot;. A special
property name <code>$</code> can be used (as in <code>{$:&quot;text&quot;}</code>) to accept a match against any
property of the object or its nested object properties. That&#39;s equivalent to the simple
substring match with a <code>string</code> as described above. The predicate can be negated by prefixing
the string with <code>!</code>.
For example <code>{name: &quot;!M&quot;}</code> predicate will return an array of items which have property <code>name</code>
not containing &quot;M&quot;.</p>
<p>Note that a named property will match properties on the same level only, while the special
<code>$</code> property will match properties on the same level or deeper. E.g. an array item like
<code>{name: {first: &#39;John&#39;, last: &#39;Doe&#39;}}</code> will <strong>not</strong> be matched by <code>{name: &#39;John&#39;}</code>, but
<strong>will</strong> be matched by <code>{$: &#39;John&#39;}</code>.</p>
</li>
<li><p><code>function(value, index, array)</code>: A predicate function can be used to write arbitrary filters.
The function is called for each element of the array, with the element, its index, and
the entire array itself as arguments.</p>
<p>The final result is an array of those elements that the predicate returned true for.</p>
</li>
</ul>

        
      </td>
    </tr>
    
    <tr>
      <td>
        comparator
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-function">function(actual, expected)</a><a href="" class="label type-hint type-hint-true">true</a><a href="" class="label type-hint type-hint-undefined">undefined</a>
      </td>
      <td>
        <p>Comparator which is used in
    determining if the expected value (from the filter expression) and actual value (from
    the object in the array) should be considered a match.</p>
<p>  Can be one of:</p>
<ul>
<li><p><code>function(actual, expected)</code>:
The function will be given the object value and the predicate value to compare and
should return true if both values should be considered equal.</p>
</li>
<li><p><code>true</code>: A shorthand for <code>function(actual, expected) { return angular.equals(actual, expected)}</code>.
This is essentially strict comparison of expected and actual.</p>
</li>
<li><p><code>false|undefined</code>: A short hand for a function which will look for a substring match in case
insensitive way.</p>
<p>Primitive values are converted to strings. Objects are not compared against primitives,
unless they have a custom <code>toString</code> method (e.g. <code>Date</code> objects).</p>
</li>
</ul>

        
      </td>
    </tr>
    
  </tbody>
</table>

</section>
  
  


  
  <h2 id="example">Example</h2><p>

<div>
  <a ng-click="openPlunkr('examples/example-example98', $event)" class="btn pull-right">
    <i class="glyphicon glyphicon-edit">&nbsp;</i>
    Edit in Plunker</a>

  <div class="runnable-example"
      path="examples/example-example98">

  
    <div class="runnable-example-file" 
      name="index.html"
      language="html"
      type="html">
      <pre><code>&lt;div ng-init=&quot;friends = [{name:&#39;John&#39;, phone:&#39;555-1276&#39;},&#10;                         {name:&#39;Mary&#39;, phone:&#39;800-BIG-MARY&#39;},&#10;                         {name:&#39;Mike&#39;, phone:&#39;555-4321&#39;},&#10;                         {name:&#39;Adam&#39;, phone:&#39;555-5678&#39;},&#10;                         {name:&#39;Julie&#39;, phone:&#39;555-8765&#39;},&#10;                         {name:&#39;Juliette&#39;, phone:&#39;555-5678&#39;}]&quot;&gt;&lt;/div&gt;&#10;&#10;&lt;label&gt;Search: &lt;input ng-model=&quot;searchText&quot;&gt;&lt;/label&gt;&#10;&lt;table id=&quot;searchTextResults&quot;&gt;&#10;  &lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Phone&lt;/th&gt;&lt;/tr&gt;&#10;  &lt;tr ng-repeat=&quot;friend in friends | filter:searchText&quot;&gt;&#10;    &lt;td&gt;{{friend.name}}&lt;/td&gt;&#10;    &lt;td&gt;{{friend.phone}}&lt;/td&gt;&#10;  &lt;/tr&gt;&#10;&lt;/table&gt;&#10;&lt;hr&gt;&#10;&lt;label&gt;Any: &lt;input ng-model=&quot;search.$&quot;&gt;&lt;/label&gt; &lt;br&gt;&#10;&lt;label&gt;Name only &lt;input ng-model=&quot;search.name&quot;&gt;&lt;/label&gt;&lt;br&gt;&#10;&lt;label&gt;Phone only &lt;input ng-model=&quot;search.phone&quot;&gt;&lt;/label&gt;&lt;br&gt;&#10;&lt;label&gt;Equality &lt;input type=&quot;checkbox&quot; ng-model=&quot;strict&quot;&gt;&lt;/label&gt;&lt;br&gt;&#10;&lt;table id=&quot;searchObjResults&quot;&gt;&#10;  &lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Phone&lt;/th&gt;&lt;/tr&gt;&#10;  &lt;tr ng-repeat=&quot;friendObj in friends | filter:search:strict&quot;&gt;&#10;    &lt;td&gt;{{friendObj.name}}&lt;/td&gt;&#10;    &lt;td&gt;{{friendObj.phone}}&lt;/td&gt;&#10;  &lt;/tr&gt;&#10;&lt;/table&gt;</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="protractor.js"
      type="protractor"
      language="js">
      <pre><code>var expectFriendNames = function(expectedNames, key) {&#10;  element.all(by.repeater(key + &#39; in friends&#39;).column(key + &#39;.name&#39;)).then(function(arr) {&#10;    arr.forEach(function(wd, i) {&#10;      expect(wd.getText()).toMatch(expectedNames[i]);&#10;    });&#10;  });&#10;};&#10;&#10;it(&#39;should search across all fields when filtering with a string&#39;, function() {&#10;  var searchText = element(by.model(&#39;searchText&#39;));&#10;  searchText.clear();&#10;  searchText.sendKeys(&#39;m&#39;);&#10;  expectFriendNames([&#39;Mary&#39;, &#39;Mike&#39;, &#39;Adam&#39;], &#39;friend&#39;);&#10;&#10;  searchText.clear();&#10;  searchText.sendKeys(&#39;76&#39;);&#10;  expectFriendNames([&#39;John&#39;, &#39;Julie&#39;], &#39;friend&#39;);&#10;});&#10;&#10;it(&#39;should search in specific fields when filtering with a predicate object&#39;, function() {&#10;  var searchAny = element(by.model(&#39;search.$&#39;));&#10;  searchAny.clear();&#10;  searchAny.sendKeys(&#39;i&#39;);&#10;  expectFriendNames([&#39;Mary&#39;, &#39;Mike&#39;, &#39;Julie&#39;, &#39;Juliette&#39;], &#39;friendObj&#39;);&#10;});&#10;it(&#39;should use a equal comparison when comparator is true&#39;, function() {&#10;  var searchName = element(by.model(&#39;search.name&#39;));&#10;  var strict = element(by.model(&#39;strict&#39;));&#10;  searchName.clear();&#10;  searchName.sendKeys(&#39;Julie&#39;);&#10;  strict.click();&#10;  expectFriendNames([&#39;Julie&#39;], &#39;friendObj&#39;);&#10;});</code></pre>
    </div>
  

    <iframe class="runnable-example-frame" src="examples/example-example98/index.html" name="example-example98"></iframe>
  </div>
</div>


</p>

</div>


